<template>
	<view class="storeWrapper">
		<view class="contentWrapper" v-if="!isEmpty">
			<view class="listWrapper">
				<view v-for="(item,index) in shopList" class="item">
					<view class="inblk item-barcode">商品号:{{item.barcode}}</view>
					<view class="inblk item-title">{{item.title}}</view>
					<view class="inblk item-price">¥{{((item.price*item.num)/100).toFixed(2)}}</view>
					<view class="opWrapper">
						<view class="inblk xx sub" :class="{'disable':item.num==1}" v-on:click="bindSub(index)">−</view>
						<view class="inblk xx num">{{item.num}}</view>
						<view class="inblk xx add" v-on:click="bindAdd(index)">+</view>
					</view>
					<image class="item-del" src="../../static/del.png" v-on:click="bindDel(index)"></image>
				</view>
			</view>
			<view class="payWrapper">
				<view class="inblk pay-total">总额:¥{{(total/100).toFixed(2)}}, 共{{count}}件商品</view>
				<view class="inblk pay-pay">
					<text>实付:</text>
					<text class="amount">¥{{(total/100).toFixed(2)}}</text>
				</view>
				<view class="pay-btn" v-on:click="bindPay">去支付</view>
			</view>
		</view>
		
		

		<view class="scanBWrapper">
		</view>
		<view class="bottomWrapper bottom">
			<view class="scanWrapper" v-on:click="bindScan()">
				<image class="scan-icon" src="../../static/saoyisaobai.png"></image>
				<view class="scan-title">扫一扫</view>
			</view>
			
		</view>
		
		<leavePopup v-if="isShowLeave" v-on:leave="bindLeave()" v-on:keep="bindKeep()"></leavePopup>
	</view>
</template>

<script>
	import common from '../../common/common.js';
	import http from '../../common/http.js';
	export default {
		
		data() {
			return {
				
				isEmpty:true,
				isShowLeave:false,
				"dsn":"",
				"avatar":"",
				"storename":"安阳暗河超市",
				"username":"小胖",
				"phone":"133333333",
				"price":"0",
				"total":"0.0", //商品总价格
				"count":"0", //商品总数量
				"shopList":[
					
				],
				"storeid":0,
				"isWxConfig":false
			}
		},
		onLoad (options) {
			var self = this;
			this.storeid = options.storeid
			common.initWxConfigIfNeed(()=>{
				self.isWxConfig = true
			})
			this.refreshAmount()
		},
		methods: {
			decryptPhoneNumber(e) {
				console.log(e)
			},
			bindLeave(){
				this.leave()
			},
			bindKeep(){
				this.isShowLeave = false
			},
			bindScan() {
				var self = this
				common.scanQrCode((barcode)=>{
						http.get("/store/addstock", {"storeid":self.storeid,"barcode":barcode}, (r)=>{
							if (r["Id"] == 0) {
								uni.showToast({
									icon:"none",
									title:"商品条码错误"
								})
								return
							}
							var findIndex = -1
							for (var index=0;index<self.shopList.length;index++) {
								if (self.shopList[index]["barcode"] == r["BarCode"]) {
									findIndex = index
								}
							}
							var nShopList = self.shopList
							if (findIndex == -1) {
								nShopList.push({
									"barcode":r["BarCode"],
									"price":r["Price"],
									"num":1,
									"title":r["ProName"],
									"id":r["Id"]
								})
							}else{
								nShopList[findIndex]["num"]++
							}
							self.shopList = nShopList
							wx.showToast({
								title:'添加成功',
								icon:'none'
							})
							self.refreshAmount()
						})
					
				})
			},
			
			bindSub(index) {
				if (this.shopList[index]["num"] == 1) {
					return
				}
				this.shopList[index]["num"] -=1
				this.refreshAmount()
			},
			bindAdd(index) {
				this.shopList[index]["num"] +=1
				this.refreshAmount()
			},
			bindOpen() {
				this.isShowLeave = true	
			},
			
			
			bindDel(index) {
				var self = this;
				var item = this.shopList[index]
				uni.showModal({
					title:"确定删除?",
					content:item["title"],
					confirmText:"确定",
					cancelText:"取消",
					success(res) {
						if (res.confirm) {
							self.shopList.splice(index,1)
							self.refreshAmount()
						}
					}
				})
				
			},
			refreshAmount() {
				var total = 0
				var count = 0
				for (var i=0;i<this.shopList.length;i++) {
					var item = this.shopList[i]
					total = total+item.price*item.num
					count += item.num
				}
				this.total = total
				this.count = count
				
				this.isEmpty = this.shopList.length == 0
			},
			bindPay() {
				if (this.shopList.length == 0) {
					uni.showToast({
						icon:"none",
						title:"您还没有选购商品"
					})
					return
				}
				this.doPay()
			},
			doPay(){
				var self=this
				var proList = []
				var price=0
				
				console.log(this.shopList)
				for (var i=0;i<this.shopList.length;i++) {
					var pid = this.shopList[i]["id"]
					var nums = this.shopList[i]["num"]
					price+=this.shopList[i]["price"]*nums
					proList.push({
						"Productid":pid,
						"Nums":nums
					})
				}
				var params={}
				params.proList=JSON.stringify(proList)
				params.storeid=self.storeid
				//params.m=price
				http.post("/store/suborder",params,function(res){
					uni.showModal({
						title:"订单金额：￥"+(self.total/100).toFixed(2),
						content:"确认收到款项？\n 订单号："+res,
						success() {
							http.get("/store/orderpaid",{"orderid":res},function(r){
								uni.showToast({
									title:"收款成功"
								})
							})
						},
					})
				})
			},
			payDone() {
				this.shopList = []
				wx.showToast({
					"title":"支付完成",
					icon:'none'
				})
				this.isShowLeave = true
				this.total = "0.0"
				this.count = "0"
				this.isEmpty = true
			},
			onKefu() {
				common.showKefu()
			}
		}
	}
</script>

<style>
	.headerWrapper {
		background-color: #52CBC6;
		height: 150px;
		position: fixed;
		width: 100%;
		padding-top: 40px;
		box-sizing: border-box;
	}
	.store-name {
		font-size: 20px;
		padding-top: 10px;
		box-sizing: border-box;
		padding-left: 15px;
		color: white;
		font-weight: bolder;
		height: 50px;
	}
	.persionWrapper {
		background-color: white;
		height: 80px;
		margin-left: 15px;
		margin-right: 15px;
		border-radius: 10px;
		box-shadow: 0px -1px 10px rgba(0,0,0,0.2); 
		position: relative;
	}
	.persionWrapper .avatar {
		position: absolute;
		width: 50px;
		height: 50px;
		background-color: #f6f6f6;
		margin-left: 15px;
		top: 50%;
		margin-top: -25px;
		border-radius: 25px;
	}
	.persionWrapper .name {
		position: absolute;
		left: 75px;
		top: 30px;
	}
	
	.persionWrapper .phone {
		position: absolute;
		top: 40px;
		left: 70px;
		color: #333333;
		
	}
	.persionWrapper .search {
		color: #666666;
		position: absolute;
		font-size: 14px;
		height: 30px;
		line-height: 25px;
		right: 15px;
		border-radius: 5px;
		border: 1px solid #666666;
		top: 50%;
		margin-top: -32px;
		box-sizing: border-box;
		padding: 2px 5px;
	}
	.persionWrapper .kefu {
		background-color: #149707;
		color: white;
		position: absolute;
		font-size: 14px;
		height: 30px;
		right: 15px;
		border-radius: 5px;
		margin-top: 2px;
		top: 50%;
		box-sizing: border-box;
		padding: 2px;
	}
	.contentWrapper {
		position: absolute;
		margin-top: 0px;
		width: 100%;
		max-height: 100%;
		box-sizing: border-box;
	}
	.listWrapper {
		overflow-y: scroll;
		overflow: hidden;
		padding-bottom: 170px;
		
	}
	.item {
		height: 50px;
		border-bottom: 1px solid #f6f6f6;
		display: flex;
		align-items: center;
		position: relative;
		margin: 0px 15px;
	}
	.item-icon {
		width: 30px;
		height: 30px;
		background-color: red;
		margin-right: 10px;
	}
	.item-barcode {
		color: #999999;
		position: absolute;
		font-size: 12px;
		top: 5px;
	}
	.item-title {
		position: absolute;
		width: 100%;
		font-size: 16px;
		font-weight: bolder;
		bottom: 5px;
	}
	.item-del {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
	}
	.item-price {
		position: absolute;
		left: 50%;
		color: red;
		font-size: 14px;
	}
	.payWrapper {
		position: fixed;
		background-color: white;
		bottom: 75px;
		height: 75px;
		width: 100%;
		border-top: 1px solid #dedede;
	}
	
	.open {
		left: 30px;
		color: #52CBC6;
	}
	.wode {
		right: 30px;
		color: #52CBC6;
	}
	.btn-icon {
		width: 30px;
		height: 30px;
	}
	.bottom {
		width: 100%;
		height: 80px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px -1px 8px rgba(0,0,0,0.1); 
		z-index: 10;
		background-color: white;
	}
	.scanBWrapper {
		
		border-radius: 50px;
		box-shadow: 0px -1px 20px rgba(0,0,0,0.2);  
		background-color: white;
		width: 100px;
		height: 100px;
		position: fixed;
		bottom: -10px;
		left: 50%;
		margin-left: -50px;
		opacity: 1;
		z-index: 0;
	}
	.scanWrapper {
		width: 80px;
		height: 80px;
		border: 10px solid white;
		border-radius: 50%;
		background-color: #57D7D2;
		color: white;
		position: absolute;
		left: 50%;
		margin-left: -50px;
		margin-top: -15px;
		text-align: center;
	}
	.scan-icon {
		position: absolute;
		width: 30px;
		height: 30px;
		top: 50%;
		left: 50%;
		margin-left: -15px;
		margin-top: -25px;
	}
	.scan-title {
		position: absolute;
		font-size: 14px;
		width: 100%;
		text-align: center;
		top: 50%;
		margin-top: 8px;
		color: white;
		font-weight: bold;
	}
	
	.pay-total {
		position: absolute;
		left: 5px;
		top: 10px;
		color: #999999;
		font-size: 14px;
	}
	
	.pay-btn {
		width: 80px;
		height: 35px;
		text-align: center;
		border-radius: 5px;
		line-height: 35px;
		background-color: #FAC32B;
		color: #222222;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -25px;
	}
	
	.pay-pay {
		position: absolute;
		top: 30px;
		left: 5px;
		font-weight: 300;
	}
	.amount {
		color: red;
		font-size: 18px;
	}
	.opWrapper {
		position: absolute;
		right: 50px;
		display: flex;
	}
	.item .xx {
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		background-color: #CCCCCC;
		margin-right: 1px;
		font-size: 15px;
	}
	.item .add {
		
	}
	.item .sub {

	}
	.item .num {
		
	}
	.item .disable {
		background-color: #f6f6f6;
	} 
	.mask {
		background-color: rgba(0,0,0, 0.2);
	}
	.emptyWrapper {
		position: absolute;
		margin-top: 180px;
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		padding: 0px 10px;
	}
	.empty-title {
		width: 100%;
		text-align: center;
		color: #bbbbbb;
		font-weight: bold;
		font-size: 20px;
		height: 40px;
		line-height: 40px;
		margin-top: 10px;
	}
	.empty-options {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}
	.empty-option {
		/* width: 80px; */
		height: 70px;
		display: flex;
		flex-direction: column;
		align-content: space-around;
		color: #bbb;
		text-align: center;
		align-items: center;
	}
	.empty-option-text {
		font-size: 13px;
	}
	.empty-option-num {
		width: 20px;
		height: 20px;
		border-radius: 10px;
		font-size: 13px;
		line-height: 20px;
		background-color: #FAC32B;
		color: white;
		margin-bottom: 8px;
	}
	.empty-arrow {
		width: 40px;
		max-width: 25px;
		height: 70px;
		flex: 1;
		
	}
</style>
